<template>
	<u-upload :fileList="files" @afterRead="afterRead" @delete="deletePic" name="upload" multiple :maxCount="maxCount"
		:width="uploadW" :height="uploadH">
		<image src="__ROOT__/common/images/upload-img.png" mode="widthFix" class="upload-image">
		</image>
	</u-upload>
</template>
<script setup>
	import {
		ref,
		watch
	} from "vue";
	import {
		uploadFile,
	} from "@/utils/upload";

	const props = defineProps({
		fileList: {
			type: Array
		},
		maxCount: {
			type: Number
		}
	})

	const emit = defineEmits(['upload'])

	const files = ref([])
	const uploadW = ref(uni.upx2px(170))
	const uploadH = ref(uni.upx2px(162))

	watch(() => props.fileList, (newV) => {
		files.value = newV
	}, {
		deep: true
	})

	const deletePic = (e) => {
		files.value.splice(e.index, 1)
		emit('upload', files.value)
	}

	const afterRead = (event) => {
		uploadFile(event, files.value, '/common/upload', (list) => {
			files.value = list
			emit('upload', files.value)
		})
	}
</script>
<script>

</script>

<style lang="scss">
	.upload-image {
		width: 170rpx;
		height: 162rpx;
	}
</style>